<template>
	<view>
		<view class="recommendbox">
			<view class="titlebox">
				<image src="../static/image/tit.png"></image>
				<view>为你推荐</view>
			</view>
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="5000"
				:duration="500">
				<swiper-item class="swiper-item" v-for="(sitem,sindex) in 3" :key="sindex">
					<view class="goodsbox">
						<view class="goodslist" v-for="(item,index) in 6" :key="index">
							<image src="../static/logo.png"></image>
							<view class="infobox">
								<view class="namebox">劳力士128238烟</view>
								<view class="tipbox">现货发售</view>
								<view class="pricebox"><text>￥</text>115,000</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		name:"recommend",
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	.recommendbox{
		width: 690rpx;
		margin: 24rpx auto 0 auto;
		background-color: #fff;
		border-radius: 20rpx;
		padding-bottom: 40rpx;
		.titlebox{
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			height: 114rpx;
			font-size: 30rpx;
			font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
			font-weight: normal;
			color: #333333;
			image{
				width: 8rpx;
				height: 34rpx;
				margin-right: 14rpx;
			}
		}
		.swiper {
			height: 820rpx;
			.swiper-item {
				display: block;
				height: 820rpx;
				// line-height: 300rpx;
				text-align: center;
				.goodsbox{
					display: flex;
					flex-wrap: wrap;
					justify-content: space-around;
					.goodslist{
						width: 222rpx;
						border-radius: 20rpx;
						background: #FFFFFF;
						padding-bottom: 22rpx;
						image{
							width: 222rpx;
							height: 222rpx;
							border-radius: 20rpx 20rpx 0 0;
						}
						.infobox{
							width: 200rpx;
							margin: 0 auto;
							.namebox{
								width: 200rpx;
								font-size: 28rpx;
								font-family: Source Han Sans CN-Medium, Source Han Sans CN;
								font-weight: 500;
								color: #222222;
								-webkit-line-clamp: 1;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							.tipbox{
								font-size: 20rpx;
								font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
								font-weight: normal;
								color: #888888;
								margin: 16rpx 0 20rpx 0;
							}
							.pricebox{
								font-size: 30rpx;
								font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
								font-weight: normal;
								color: #F94D29;
								>text{
									font-size: 24rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>